<template>
	<div class="imgLibraryKeywordContent">
		<div class="terminalIndexTreeContent">
			<TreeList2
				v-if="isShow"
				:list="treeData"
				:cocnfig="defaultPropsData"
				:listType="listType"
				:handleNode="treeListNodeClick"
				:handleNodeDelete="treeListNodeDelete"
				:handleNodeAdd="treeListNodeAdd"
				:handleNodeEdit="treeListNodeEdit"
			></TreeList2>
		</div>
		<div class="terminalIndexListContent">
			<div class="terminalIndexListTab">
				<div class="terminalIndexListTabBtn">
					<wj-Button type="save" @click="handleAdd">新增白名单图片</wj-Button>
					<wj-Button type="save" @click="handleDeleteAll">批量删除</wj-Button>
				</div>
				<div class="terminalIndexListTabSearch">
					<el-input
						placeholder="请输关键字检索"
						type="text"
						v-model="searchValue"
						@keyup.enter.native="
							(e) => {
								e.target.blur();
							}
						"
						@blur="searchEvent"
					></el-input>
				</div>
			</div>
			<div class="terminalIndexListArray">
				<div class="terminalIndexListArrayContent">
					<el-table :data="tableData" style="width: 100%" @selection-change="handleSelectionChange" :row-class-name="'tableRowClassName'">
						<el-table-column type="selection" width="120"> </el-table-column>
						<el-table-column prop="name" label="名称" show-overflow-tooltip> </el-table-column>
						<el-table-column prop="name" label="内容" show-overflow-tooltip>
							<template slot-scope="scope">
								<el-image
									style="width: 24px; height: 24px; margintop: 7px"
									fit="fill"
									:src="scope.row.imagePateStr"
									:preview-src-list="[scope.row.imagePateStr]"
								>
									<div slot="error">
										<i class="wj-icon-24gl-pictureSplit"></i>
									</div>
								</el-image>
							</template>
						</el-table-column>
						<el-table-column prop="createdDate" label="创建时间" width="240"> </el-table-column>
						<el-table-column label="操作" width="140">
							<template slot-scope="scope">
								<el-link type="primary" @click="handleEdit(scope.$index, scope.row)">编辑</el-link>
								<el-link type="primary" @click="handleDelete(scope.$index, scope.row)">删除</el-link>
							</template>
						</el-table-column>
					</el-table>
				</div>
				<div class="terminalIndexListArrayPage">
					<el-pagination
						background
						@size-change="handleSizeChange"
						@current-change="handleCurrentChange"
						:current-page="currentPage"
						:page-sizes="[12]"
						:page-size="pageSize"
						layout="total, prev, pager, next, jumper"
						:total="total"
					>
					</el-pagination>
				</div>
			</div>
		</div>
		<!-- 自定义alertBox弹框——编辑 -->
		<AlertBox :alertBoxVisible="alertBoxFormVisible">
			<div class="contentBox contentBoxDetailskeyword_class">
				<div class="contentBox_header">
					<p>编辑白名单图片</p>
					<i class="wj-icon-guanbi" @click="alertBoxFormclose"></i>
				</div>
				<div class="contentBox_body">
					<div class="infoRow_form">
						<span>图片名称<b style="color: rgb(248, 4, 4)">*</b></span>
						<div class="form-item">
							<el-input v-model="keywordEdit.name" placeholder="请输入白名单词名称" v-validate="'required'"></el-input>
						</div>
					</div>
					<div class="infoRow_form">
						<span>所属分类<b style="color: rgb(248, 4, 4)">*</b></span>
						<div class="form-item">
							<el-select v-model="keywordEdit.collectId" placeholder="请选择白名单图片类库" @change="handleSelect">
								<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
							</el-select>
						</div>
					</div>
					<div class="infoRow_form_img">
						<span>图片上传<b style="color: rgb(248, 4, 4)">*</b></span>
						<div class="form-item">
							<el-image
								v-if="editImgBool"
								style="width: 160px; height: 160px"
								fit="fill"
								:src="keywordEdit.imgSrc"
								:preview-src-list="[keywordEdit.imgSrc]"
							>
								<div slot="error">
									<i class="wj-icon-24gl-pictureSplit"></i>
								</div>
							</el-image>
							<wj-Button type="reset" v-if="editImgBool" @click="editImg">重新上传</wj-Button>
							<el-upload
								v-if="!editImgBool"
								ref="imgEdit"
								:action="actionStr"
								list-type="picture-card"
								:auto-upload="false"
								:on-change="handleLimit"
							>
								<i slot="default" class="el-icon-plus"></i>
								<div slot="file" slot-scope="{ file }" class="thumbnailImg">
									<img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
									<span class="el-upload-list__item-actions">
										<span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
											<i class="el-icon-zoom-in"></i>
										</span>
									</span>
								</div>
							</el-upload>
							<el-dialog v-if="!editImgBool" :modal="false" :visible.sync="dialogVisible">
								<img :style="{ width: '100%', height: '64vh' }" :src="dialogImageUrl" alt="加载失败" />
							</el-dialog>
							<wj-Button type="reset" v-if="!editImgBool" @click="editImgClose">取消重新上传</wj-Button>
						</div>
					</div>
				</div>
				<div class="contentBox_footer">
					<wj-Button type="save" v-checksubmit="{ submitEvent: alertBoxFormConfirm, cls: 'contentBoxDetailskeyword_class' }"
						>确定</wj-Button
					>
				</div>
			</div>
		</AlertBox>
		<!-- 自定义alertBox弹框——新增 -->
		<AlertBox :alertBoxVisible="alertBoxAddVisible">
			<div class="contentBox contentBoxAddkeyword_class">
				<div class="contentBox_header">
					<p>新增白名单图片</p>
					<i class="wj-icon-guanbi" @click="alertBoxAddclose"></i>
				</div>
				<div class="contentBox_body">
					<div class="infoRow_form">
						<span>图片名称<b style="color: rgb(248, 4, 4)">*</b></span>
						<div class="form-item">
							<el-input v-model="keywordAdd.name" placeholder="请输入白名单图片名称" v-validate="'required'"></el-input>
						</div>
					</div>
					<div class="infoRow_form">
						<span>所属分类<b style="color: rgb(248, 4, 4)">*</b></span>
						<div class="form-item">
							<el-select v-model="keywordAdd.collectId" placeholder="请选择白名单图片类库" @change="handleSelect">
								<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
							</el-select>
						</div>
					</div>
					<div class="infoRow_form_img">
						<span>图片上传<b style="color: rgb(248, 4, 4)">*</b></span>
						<div class="form-item">
							<el-upload ref="imgAdd" :action="actionStr" list-type="picture-card" :auto-upload="false" :on-change="handleLimit">
								<i slot="default" class="el-icon-plus"></i>
								<div slot="file" slot-scope="{ file }" class="thumbnailImg">
									<img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
									<span class="el-upload-list__item-actions">
										<span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
											<i class="el-icon-zoom-in"></i>
										</span>
									</span>
								</div>
							</el-upload>
							<el-dialog :modal="false" :visible.sync="dialogVisible">
								<img :style="{ width: '100%', height: '64vh' }" :src="dialogImageUrl" alt="加载失败" />
							</el-dialog>
						</div>
					</div>
				</div>
				<div class="contentBox_footer">
					<wj-Button type="save" v-checksubmit="{ submitEvent: alertBoxAddConfirm, cls: 'contentBoxAddkeyword_class' }">确定</wj-Button>
				</div>
			</div>
		</AlertBox>
	</div>
</template>
<script>
import httpUrl from "@/utils/request/httpUrl";
import TreeList2 from "@/views/common/TreeList2";
import {
	/* 修改 */
	strategy_imgGroup,
	strategy_imgGroup_add,
	strategy_imgGroup_edit,
	strategy_imgGroup_delete,
	strategy_imgGroup_byGroupId,
	strategy_img_all,
	strategy_img_delete,
	strategy_img_all_delete,
	strategy_img_upload,
	strategy_img_add,
	strategy_img_edit,
} from "@/utils/request/api";
export default {
	name: "ImgLibraryKeyword",
	components: {
		TreeList2,
	},
	data() {
		return {
			// 文件上传  组件需要用的action
			actionStr:
				process.env.NODE_ENV == "development"
					? httpUrl.devUrl + "/uploadDangerImage"
					: process.env.NODE_ENV == "production"
					? httpUrl.prodUrl + "/uploadDangerImage"
					: "",
			// 放大图片的url和弹窗
			dialogImageUrl: "",
			dialogVisible: false,
			// 局部刷新树形组件
			isShow: true,
			// 树形组件列表
			treeData: [],
			// 树形组件配置
			defaultPropsData: {
				children: "",
				label: "groupName",
			},
			// 区分终端组0和关键字库组1和图库2
			listType: 2,
			// 搜索
			searchValue: "",
			// 表格数据
			tableData: [],
			multipleSelection: [],
			// 分页当前页码
			currentPage: 1,
			// 总页码
			total: 0,
			// 每页条数
			pageSize: 10,
			// 分页初始化页码
			pageNum: 1,
			// 白名单词组的id，用来分页查询判断
			keywordGroupId: undefined,
			// 自定义弹窗控制——编辑
			alertBoxFormVisible: false,
			// 编辑白名单词
			keywordEdit: {
				id: "",
				name: "",
				collectId: "",
				imageId: "",
				imgSrc: "",
			},
			// 自定义弹窗控制——新增
			alertBoxAddVisible: false,
			// 新增白名单词
			keywordAdd: {
				name: "",
				collectId: "",
				imgFile: null,
			},
			// 下拉数据
			options: [],
			// 编辑时的重新上传的按钮显示和隐藏  true是重新上传  false  取消重新上传
			editImgBool: null,
		};
	},
	created() {},
	mounted() {
		this.getAllKeywordGroup();
		this.getTreeListNodeData();
		this.getAllKeyword(this.pageNum, this.pageSize);
	},
	methods: {
		// 图片更改
		handleLimit(file, fileList) {
			fileList.length = 0;
			fileList.push(file);
			this.keywordAdd.imgFile = file;
			console.log(file, fileList);
		},
		// 放大缩略图
		handlePictureCardPreview(file) {
			this.dialogImageUrl = file.url;
			this.dialogVisible = true;
		},

		//局部刷新
		reload() {
			this.isShow = false;
			this.$nextTick(() => {
				this.isShow = true;
			});
		},
		// 树形组件节点点击事件
		treeListNodeClick(data) {
			console.log(data);
			this.currentPage = 1;
			this.total = 0;
			this.pageSize = 10;
			this.pageNum = 1;
			strategy_imgGroup_byGroupId({
				page: this.pageNum,
				size: this.pageSize,
				collectId: data.id,
			}).then((res) => {
				console.log(res);
				if (res.code == 200) {
					res.data.result.forEach((item) => {
						item.imagePateStr = "https://" + window.location.host + "/images/" + item.imageName;
					});
					this.keywordGroupId = data.id;
					this.tableData = res.data.result;
					this.total = res.data.total;
					this.multipleSelection = [];
				} else {
					this.$msg.error("查询该组白名单图片失败！");
				}
			});
		},
		// 树形组件数据获取
		getTreeListNodeData() {
			strategy_imgGroup().then((res) => {
				console.log(res);
				if (res.code == 200) {
					this.recursionTreeList2(res.data.result).forEach((element) => {
						this.treeData.push(element);
					});
					console.log(this.treeData);
				} else {
					this.$msg.error("白名单图库集合获取失败！");
				}
			});
		},
		// 递归  treeList2组件  添加isEdit属性
		recursionTreeList2(list) {
			list.forEach((item) => {
				item.isEdit = false;
				if (item.collectName) {
					item.groupName = item.collectName;
					delete item.collectName;
				}
			});
			return list;
		},
		// 白名单词组删除
		treeListNodeDelete(id) {
			// alert("删除");
			strategy_imgGroup_delete({
				id: id,
			}).then((res) => {
				console.log(res);
				if (res.code == 200) {
					this.reload();
					this.$msg.success("删除白名单图库成功！");
					this.treeData = [];
					this.getTreeListNodeData();
					this.getAllKeywordGroup();
				} else {
					this.$msg.error("删除白名单图库失败！");
				}
			});
		},
		// 白名单词组添加
		treeListNodeAdd(groupName) {
			// alert("添加");
			strategy_imgGroup_add({
				collectName: groupName,
			}).then((res) => {
				console.log(res);
				this.reload();
				this.treeData = [];
				this.getTreeListNodeData();
				this.getAllKeywordGroup();
				console.log(this.treeData);
				if (res.code == 200) {
					this.$msg.success("白名单图库添加成功！");
				} else {
					this.$msg.error("白名单图库添加失败！");
				}
			});
		},
		// 白名单词组编辑
		treeListNodeEdit(groupName, id) {
			// alert("编辑");
			strategy_imgGroup_edit({
				id: id,
				collectName: groupName,
			}).then((res) => {
				console.log(res);
				this.reload();
				this.treeData = [];
				this.getTreeListNodeData();
				this.getAllKeywordGroup();
				console.log(this.treeData);
				if (res.code == 200) {
					this.$msg.success("白名单图库编辑成功！");
				} else {
					this.$msg.error("白名单图库编辑失败！");
				}
			});
		},
		// 搜索事件
		searchEvent() {
			console.log(this.spanIsActive, this.searchValue);
			this.currentPage = 1;
			this.total = 0;
			this.pageSize = 10;
			this.pageNum = 1;
			if (this.keywordGroupId == undefined) {
				this.getSearchKeyword(this.pageNum, this.pageSize, this.searchValue);
			} else {
				this.getSearchKeywordByGroupId(this.pageNum, this.pageSize, this.searchValue, this.keywordGroupId);
			}
		},
		// 表格选中
		handleSelectionChange(val) {
			this.multipleSelection = val;
			console.log(this.multipleSelection);
		},
		// 删除
		handleDelete(index, row) {
			console.log(index, row);
			strategy_img_delete({
				id: row.id,
			}).then((res) => {
				console.log(res);
				if (res.code == 200) {
					this.$msg.success("删除白名单图片成功！");
					this.getAllKeyword(this.pageNum, this.pageSize);
				} else {
					this.$msg.error("删除白名单图片失败！");
				}
			});
		},
		// 批量删除
		handleDeleteAll() {
			console.log(this.multipleSelection);
			if (this.multipleSelection.length > 0) {
				var idList = [];
				this.multipleSelection.forEach((item) => {
					idList.push(item.id);
				});
				console.log(decodeURIComponent(idList));
				strategy_img_all_delete({
					idList: decodeURIComponent(idList),
				}).then((res) => {
					console.log(res);
					if (res.code == 200) {
						this.$msg.success("白名单图片批量删除成功！");
						this.getAllKeyword(this.pageNum, this.pageSize);
					} else {
						this.$msg.error("白名单图片批量删除失败！");
					}
				});
			}
		},
		// 编辑
		handleEdit(index, row) {
			console.log(index, row);
			this.alertBoxFormVisible = true;
			this.keywordEdit.id = row.id;
			this.keywordEdit.name = row.name;
			this.keywordEdit.collectId = row.collectId;
			this.keywordEdit.imageId = row.imageId;
			this.keywordEdit.imgSrc = row.imagePateStr;
			this.editImgBool = true;
		},
		// 编辑重新上传图片
		editImg() {
			this.editImgBool = false;
		},
		// 取消重新上传
		editImgClose() {
			this.editImgBool = true;
			this.$refs.imgEdit.clearFiles();
		},
		// alertBox——编辑 关闭
		alertBoxFormclose() {
			this.alertBoxFormVisible = false;
			this.editImgClose();
		},
		// alertBox——编辑 确定
		alertBoxFormConfirm() {
			if (this.editImgBool) {
				// 没有修改照片
				strategy_img_edit({
					id: this.keywordEdit.id,
					name: this.keywordEdit.name,
					collectId: this.keywordEdit.collectId,
					imageId: this.keywordEdit.imageId,
				}).then((res) => {
					console.log(res);
					if (res.code == 200) {
						this.$msg.success("白名单图片修改成功！");
						this.getAllKeyword(this.pageNum, this.pageSize);
						this.alertBoxFormVisible = false;
						if (this.$refs.imgEdit) {
							this.$refs.imgEdit.clearFiles();
						}
						this.editImgBool = null;
					} else {
						this.$msg.error("白名单图片修改失败！");
					}
				});
			} else {
				// 修改了图片
				strategy_img_upload({
					file: this.keywordAdd.imgFile.raw,
				}).then((res) => {
					console.log(res);
					if (res.code == 200) {
						strategy_img_edit({
							id: this.keywordEdit.id,
							name: this.keywordEdit.name,
							collectId: this.keywordEdit.collectId,
							imageId: res.data,
						}).then((res) => {
							console.log(res);
							if (res.code == 200) {
								this.$msg.success("白名单图片修改成功！");
								this.getAllKeyword(this.pageNum, this.pageSize);
								this.alertBoxFormVisible = false;
							} else {
								this.$msg.error("白名单图片修改失败！");
							}
						});
					} else {
						this.$msg.error("白名单图片上传失败！");
					}
				});
			}
		},
		// 新增
		handleAdd() {
			this.alertBoxAddVisible = true;
		},
		// 初始化新增
		initHandleAdd() {
			this.keywordAdd = {
				name: "",
				collectId: "",
				imgFile: null,
			};
		},
		// alertBox——新增 关闭
		alertBoxAddclose() {
			this.alertBoxAddVisible = false;
			this.initHandleAdd();
			this.$refs.imgAdd.clearFiles();
		},
		// alertBox——新增 确定
		alertBoxAddConfirm() {
			if (this.keywordAdd.collectId == "") {
				this.$msg.error("请选择白名单图库分组！");
			} else if (this.keywordAdd.imgFile == null) {
				this.$msg.error("请上传白名单图片！");
			} else {
				strategy_img_upload({
					file: this.keywordAdd.imgFile.raw,
				}).then((res) => {
					console.log(res);
					if (res.code == 200) {
						strategy_img_add({
							name: this.keywordAdd.name,
							collectId: this.keywordAdd.collectId,
							imageId: res.data,
						}).then((res) => {
							console.log(res);
							if (res.code == 200) {
								this.$msg.success("白名单图片新增成功！");
								this.getAllKeyword(this.pageNum, this.pageSize);
								this.alertBoxAddVisible = false;
								this.initHandleAdd();
								this.$refs.imgAdd.clearFiles();
							} else {
								if (res.message != "" && res.message != null && res.message != undefined) {
									this.$msg.error(res.message);
								} else {
									this.$msg.error("白名单图片新增失败！");
								}
							}
						});
					} else {
						this.$msg.error("白名单图片上传失败！");
					}
				});
			}
		},
		// select选项
		handleSelect(value) {
			console.log(value);
		},
		// 分页组件事件
		handleSizeChange(val) {
			console.log(`每页 ${val} 条`);
		},
		handleCurrentChange(val) {
			console.log(`当前页: ${val}`);
			if (this.keywordGroupId == undefined) {
				this.getAllKeyword(val, this.pageSize);
				this.keywordGroupId = undefined;
			} else {
				strategy_imgGroup_byGroupId({
					page: val,
					size: this.pageSize,
					collectId: this.keywordGroupId,
				}).then((res) => {
					console.log(res);
					if (res.code == 200) {
						this.tableData = res.data.result;
						this.total = res.data.total;
						this.multipleSelection = [];
					} else {
						this.$msg.error("查询该组白名单图片失败！");
					}
				});
			}
		},
		// 查询所有的白名单词
		getAllKeyword(page, size) {
			strategy_img_all({
				page: page,
				size: size,
			}).then((res) => {
				console.log(res);
				if (res.code == 200) {
					res.data.result.forEach((item) => {
						item.imagePateStr = "https://" + window.location.host + "/images/" + item.imageName;
					});
					this.tableData = res.data.result;
					this.total = res.data.total;
					this.multipleSelection = [];
					console.log(this.tableData);
				} else {
					this.$msg.error("查询白名单图库失败！");
				}
			});
		},
		// 搜索所有的白名单词
		getSearchKeyword(page, size, keyword) {
			strategy_img_all({
				page: page,
				size: size,
				keyword: keyword,
			}).then((res) => {
				console.log(res);
				if (res.code == 200) {
					res.data.result.forEach((item) => {
						item.imagePateStr = "https://" + window.location.host + " /images/" + item.imageName;
					});
					this.tableData = res.data.result;
					this.total = res.data.total;
					this.multipleSelection = [];
					console.log(this.tableData);
				} else {
					this.$msg.error("检索白名单图库失败！");
				}
			});
		},
		// 搜索某个白名单词组下的白名单词
		getSearchKeywordByGroupId(page, size, keyword, id) {
			strategy_img_all({
				page: page,
				size: size,
				keyword: keyword,
				collectId: id,
			}).then((res) => {
				console.log(res);
				if (res.code == 200) {
					res.data.result.forEach((item) => {
						item.imagePateStr = "https://" + window.location.host + " /images/" + item.imageName;
					});
					this.tableData = res.data.result;
					this.total = res.data.total;
					this.multipleSelection = [];
					console.log(this.tableData);
				} else {
					this.$msg.error("检索白名单图库失败！");
				}
			});
		},
		// 查询所有白名单词组——下拉
		getAllKeywordGroup() {
			strategy_imgGroup().then((res) => {
				console.log(res);
				if (res.code == 200) {
					this.options = [];
					res.data.result.forEach((item) => {
						this.options.push({
							label: item.collectName,
							value: item.id,
						});
					});
				} else {
					this.$msg.error("白名单图库分组获取失败！");
				}
			});
		},
	},
};
</script>
<style lang="less" scoped>
.imgLibraryKeywordContent {
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	background: #eee;
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: center;
	.terminalIndexTreeContent {
		width: 15%;
		height: 100%;
		margin-right: 2px;
		box-sizing: border-box;
		background: #ffffff;
		overflow: hidden;
	}
	.terminalIndexListContent {
		width: 85%;
		height: 100%;
		background: #ffffff;
		padding: 8px;
		box-sizing: border-box;
		.terminalIndexListTab {
			width: 100%;
			height: 68px;
			box-sizing: border-box;
			padding: 0 12px;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			.terminalIndexListTabBtn {
				display: flex;
				flex-direction: row;
				justify-content: flex-start;
				align-items: center;
				[class*="wj-button-"] {
					font-size: 14px;
					padding: 12px 18px;
					margin-right: 12px;
				}
			}
			.terminalIndexListTabSearch {
				/deep/ .el-input {
					font-size: 16px;
				}
			}
		}
		.terminalIndexListArray {
			width: 100%;
			height: calc(100% - 68px);
			box-sizing: border-box;
			padding: 0 12px;
			display: flex;
			flex-direction: column;
			justify-content: flex-start;
			align-items: center;
			.terminalIndexListArrayContent {
				width: 100%;
				flex: 1;
				padding: 22px 0;
				box-sizing: border-box;

				/deep/ .el-table {
					border-left: 1px solid #ebeef5;
					border-right: 1px solid #ebeef5;
					border-top: 1px solid #ebeef5;
				}
				/deep/ .el-link {
					margin: 0 12px 0 0;
				}
			}

			.terminalIndexListArrayPage {
				width: 100%;
				height: 48px;
				display: flex;
				flex-direction: row;
				justify-content: flex-end;
				align-items: center;
			}
		}
	}
}
</style>
